<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交产品 - AI 产品之家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .text-link, .button-hover, input, textarea {
            transition: all 0.2s ease-in-out;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-700 antialiased font-sans">

    <!-- Navbar -->
    <nav class="bg-white/90 backdrop-blur-lg shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="text-2xl font-bold text-slate-900">
                    <a href="index.html">AI产品之家</a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-slate-600 hover:text-blue-600 font-medium text-link">首页</a>
                    <a href="discover.html" class="text-slate-600 hover:text-blue-600 font-medium text-link">发现</a>
                    <a href="products.html" class="text-slate-600 hover:text-blue-600 font-medium text-link">产品</a>
                    <a href="cases.html" class="text-slate-600 hover:text-blue-600 font-medium text-link">案例</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="submit-product.html" class="hidden md:block bg-blue-600 text-white py-2 px-5 rounded-lg hover:bg-blue-700 font-semibold button-hover">发布产品</a>
                    <button id="mobile-menu-button" class="md:hidden text-slate-600 focus:outline-none">
                        <i class="fas fa-bars fa-lg"></i>
                    </button>
                </div>
            </div>
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden mt-4">
                <a href="index.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">首页</a>
                <a href="discover.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">发现</a>
                <a href="products.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">产品</a>
                <a href="cases.html" class="block py-2 px-4 text-sm text-slate-600 hover:bg-slate-100 rounded-md">案例</a>
                <a href="submit-product.html" class="block mt-2 bg-blue-600 text-white py-2 px-4 rounded-lg text-center font-bold button-hover">发布产品</a>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <header class="bg-white border-b border-slate-200">
        <div class="container mx-auto px-6 py-10">
            <h1 class="text-4xl font-bold text-slate-900">分享你的 AI 产品</h1>
            <p class="mt-2 text-slate-600">让更多人发现你的创造。提交的产品经审核后将会出现在我们的网站上。</p>
        </div>
    </header>

    <main class="container mx-auto px-6 py-12">
        <div class="max-w-3xl mx-auto">
            <div class="bg-white p-8 rounded-xl shadow-md">
                <form action="#" method="POST" class="space-y-6">
                    <!-- Product URL -->
                    <div>
                        <label for="product_url" class="block text-sm font-bold text-slate-700">产品网址</label>
                        <div class="mt-1 flex rounded-md shadow-sm">
                            <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-slate-300 bg-slate-50 text-slate-500 text-sm"> https:// </span>
                            <input type="text" name="product_url" id="product_url" class="flex-1 block w-full rounded-none rounded-r-md border-slate-300 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="www.example.com">
                        </div>
                    </div>

                    <!-- Product Name -->
                    <div>
                        <label for="product_name" class="block text-sm font-bold text-slate-700">产品名称</label>
                        <input type="text" name="product_name" id="product_name" class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="例如：AI 写作助手">
                    </div>

                    <!-- Tagline -->
                    <div>
                        <label for="tagline" class="block text-sm font-bold text-slate-700">一句话简介</label>
                        <input type="text" name="tagline" id="tagline" class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="用一句话描述你的产品核心价值">
                         <p class="mt-2 text-xs text-slate-500">这将作为产品的副标题展示。</p>
                    </div>
                    
                    <!-- Categories/Tags -->
                    <div>
                        <label for="categories" class="block text-sm font-bold text-slate-700">分类标签</label>
                        <input type="text" name="categories" id="categories" class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="文案, 效率, 设计工具">
                        <p class="mt-2 text-xs text-slate-500">请使用逗号分隔，最多3个标签。</p>
                    </div>

                    <!-- Product Logo -->
                    <div>
                        <label class="block text-sm font-bold text-slate-700">产品 Logo</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 border-dashed rounded-md hover:border-blue-500 button-hover">
                            <div class="space-y-1 text-center">
                                <svg class="mx-auto h-12 w-12 text-slate-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="flex text-sm text-slate-600">
                                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                        <span>上传文件</span>
                                        <input id="file-upload" name="file-upload" type="file" class="sr-only">
                                    </label>
                                    <p class="pl-1">或拖拽到这里</p>
                                </div>
                                <p class="text-xs text-slate-500">PNG, JPG, GIF up to 1MB</p>
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div>
                        <label for="description" class="block text-sm font-bold text-slate-700">详细描述</label>
                        <div class="mt-1">
                            <textarea id="description" name="description" rows="6" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border border-slate-300 rounded-md py-2 px-3" placeholder="详细介绍你的产品功能、使用场景、目标用户等。"></textarea>
                        </div>
                    </div>

                    <!-- Submission Button -->
                    <div class="pt-4">
                        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 button-hover">
                            提交审核
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-white mt-12 border-t border-slate-200">
        <div class="container mx-auto px-6 py-8 text-center text-slate-500">
            <p>&copy; 2025 AI产品之家. All Rights Reserved.</p>
        </div>
    </footer>

    <script>
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html> 